<template>
  <div class="query_form">
    <el-form
      v-show="btnList.length !== 0"
      ref="controlForm"
      :inline="inline"
      :model="formModel"
      :disabled="disabled"
      class="control_form"
      @submit.native.prevent>
      <el-form-item
        v-for="(item, idx) in configList"
        :key="idx"
        :prop="item.prop"
        :label="item.label+':'">
        <el-input
          v-if="item.cType === 'input'"
          v-model="formModel[item.prop]"
          :clearable="item.clearable"
          :disabled="item.disabled"
          :readonly="item.readonly"
          :maxlength="item.maxlength"
          show-word-limit
          :placeholder="`请输入${item.label}`"
          @change="getInputChange" />
        <el-select
          v-if="item.cType === 'select'"
          v-model="formModel[item.prop]"
          :clearable="item.clearable"
          :disabled="item.disabled"
          :readonly="item.readonly"
          :placeholder="`请选择${item.label}`"
          @change="getSelect">
          <el-option
            v-for="ele in item.options"
            :key="ele.value"
            :label="ele.label"
            :value="ele.value" />
        </el-select>
        <el-date-picker
          v-if="item.cType === 'daterange'"
          v-model="formModel[item.prop]"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getDaterange" />
      </el-form-item>
      <div class="footer_btn">
        <el-button
          v-for="(btn, bIdx) in btnList"
          :key="bIdx"
          :type="btn.btnStyle"
          :loading="btnLoad"
          @click="handlerBtn(btn.btnType)">
          {{ btn.msg }}
        </el-button>
      </div>
    </el-form>
    <div
      v-if="Array.isArray(opBtnList) && opBtnList.length > 0"
      class="op_btn_list_container">
      <el-button
        v-for="(btn, bIdx) in opBtnList"
        :key="bIdx"
        :type="btn.btnStyle"
        :class="[`op_btn_${btn.btnType}`]"
        :icon="btn.icon"
        @click="handlerBtn(btn.btnType)">
        {{ btn.msg }}
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    /** 表单模型 */
    defaultModel: {
      type: Object,
      default: () => {}
    },
    /** 按钮load */
    btnLoad: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      // 表单模型
      formModel: {},
      // 配置列表
      configList: [],
      // 标签宽度
      labelWidth: 'auto',
      // 表单禁用
      disabled: false,
      // 行内模式
      inline: true,
      // 表单按钮
      btnList: [],
      // 功能按钮
      opBtnList: []
    };
  },

  watch: {
    defaultModel: {
      handler(val) {
        if (!val || JSON.stringify(val) === '{}') return;
        const defaul = this.jsonClone(val);
        Object.keys(defaul).forEach(keys => {
          if (Object.prototype.hasOwnProperty.call(this.$data, keys)) {
              this.$data[keys] = this.jsonClone(defaul[keys]);
              if (keys === 'configList') {
                const model = {};
                defaul[keys].forEach(item => {
                  model[item.prop] = undefined;
                });
                this.formModel = model;
              }
          }
        });
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    /**
     * 获取输入框的值
     * @param {str} str 输入值
     * @return {undefined} 无
     */
    getInputChange(str) {
      // this.$refs.controlForm.validate(valid => {
      //   if (valid) this.$emit('getFormData', this.formModel);
      // });
    },

    /**
     * 获取下拉框的值
     * @param {str} str 输入值
     * @return {undefined} 无
     */
    getSelect(str) {
      // this.$refs.controlForm.validate(valid => {
      //   if (valid) this.$emit('getFormData', this.formModel);
      // });
    },

    /**
     * 获取日期选择器的值
     * @param {arr} arr 输入值
     * @return {undefined} 无
     */
    getDaterange(arr) {
      // this.$refs.controlForm.validate(valid => {
      //   if (valid) this.$emit('getFormData', this.formModel);
      // });
    },

    /**
     * 按钮操作
     * @param {str} btnType 按钮类型
     * @return {undefined} 无
     */
    handlerBtn(btnType) {
      const param = {};
      this.$refs.controlForm['validate'](valid => {
        if (valid) {
          const obj = this.formModel;
          Object.keys(this.formModel).forEach(keys => {
            if (obj[keys] || obj[keys] === 0) {
              param[keys] = obj[keys];
            }
          });
        }
      });
      if (btnType === 'query') {
        this.$emit('getFormData', param, btnType);
      } else if (btnType === 'reset') {
        this.resetForm('controlForm');
        this.$emit('getFormData', {}, btnType);
      } else if (btnType === 'newAdd') {
        this.$emit('getFormData', {}, btnType);
      } else if (btnType === 'export') {
        this.$emit('getFormData', param, btnType);
      } else {
        this.$emit('cancelForm');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.control_form {
  ::v-deep .el-form-item {
    margin-bottom: 16px;
    margin-right: 40px;

    .el-form-item__label {
      font-size: 14px;
      color: #000000;
    }
  }

  .footer_btn {
    display: inline-block;
    margin-bottom: 16px;

    .el-button + .el-button {
      margin-left: 20px;
    }
  }
}

.op_btn_list_container {
  margin-bottom: 16px;
}
</style>
